<template>
  <div class="pt-re">
    <top-assembly :num_info="num_info"></top-assembly>
    <serach-assembly
      :type="'doctor'"
      :sereach_options="sereach_options"
      @sereach="sereach"
      :typeList="typeList"
    ></serach-assembly>
    <reception-list
      :current_head="sereach_options.status"
      :typeList="typeList"
      :hasSelect="false"
      :data="dataList"
      :columns="columnsList"
      :pagination="pagination"
      @page-change="handlePageChange"
      @size-change="handleSizeChange"
      @selection-change="handlechange"
      @changeHeadStatus="changeHeadStatus"
    ></reception-list>
    <div class="callStation" @click="tabCall">
      <img src="../../../assets/images/others/jiaohao.png" alt="" />
    </div>
    <callStation
      :dialogVisible="dialogVisible"
      :callData="callData"
      :callStatus="callStatus"
      :currentCall="currentCall"
      @tabStatus="tabStatus"
      @replaceCall="replaceCall"
      @startCall="startCall"
      @passCall="passCall"
      @nextCall="nextCall"
    ></callStation>
  </div>
</template>
<script>
import {
  my_huizhen,
  register_info_fn,
  export_jiezhen,
  complete_jz,
  call_list,
  over_sign,
  next_sign,
  end_sign,
  call_name,
} from "@/request/api";

import Bus from "@/utils/bus.js";
import callStation from "@/components/quickConsultation/callStation.vue";

import topAssembly from "@/components/quickConsultation/top.vue";
import serachAssembly from "@/components/common/serach.vue";
import receptionList from "@/components/quickConsultation/reception_list.vue";
export default {
  components: {
    topAssembly,
    serachAssembly,
    receptionList,
    callStation,
  },

  created() {
    let date = new Date();
    let currentTime =
      date.getFullYear() +
      "-" +
      (date.getMonth() + 1 < 10
        ? "0" + (date.getMonth() + 1)
        : date.getMonth() + 1) +
      "-" +
      date.getDate();
    this.sereach_options.time_val = [currentTime, currentTime]; //获取当前时间
    Bus.$on("closeCall", (val) => {
      this.currentCall = {};
      this.dialogVisible = false;
    });
    this.getregisterInfo();
    this.getdata();
  },
  data() {
    return {
      total: null,
      currentCall: {}, //当前就诊
      callStatus: 1, //叫号器列表状态  1等待中 5已过号  3已就诊
      callData: null,
      current_head: "null",
      sereach_options: {
        name: null, //姓名
        phone: null, //手机号
        visitCardNo: null, //就诊卡号
        status: "null", //状态
        time_val: null, //开始时间-结束时间
      },
      num_info: null, //预约挂号信息
      dialogVisible: false,
      typeList: [
        {
          id: "null",
          name: "全部",
          num: 0,
          interface: "",
        },
        {
          id: "0",
          name: "未签到",
          num: 0,
          interface: "noArriveNum",
        },
        {
          id: "1",
          name: "待会诊",
          num: 0,
          interface: "notStarted",
        },
        {
          id: "2",
          name: "会诊中",
          num: 0,
          interface: "haveInHand",
        },
        {
          id: "3",
          name: "已完成",
          num: 0,
          interface: "completed",
        },
      ],
      // 分页
      pagination: {
        page: 1,
        rows: 10,
        total: 0,
        pageSizes: [10, 20],
      },
      // 表单数据
      dataList: [],
      // 表头数据
      columnsList: [
        /*   {
          type: "index",
          width: "30",
        },
       {
          prop: "num",
          label: "排队序号",
          width: "100",
        }, */
        {
          prop: "userVisitCard.username",
          label: "姓名",
          width: "60",
        },
        {
          prop: "userVisitCard.mobile",
          label: "手机号",
          width: "100",
        },
        {
          prop: "userVisitCard.sex",
          label: "性别",
          width: "50",
          render: (m) => {
            return <div>{m.userVisitCard?.sex == 1 ? "男" : "女"}</div>;
          },
        },
        {
          prop: "timeSlot",
          label: "预约时段",
        },
        {
          prop: "visitCardNo",
          label: "就诊卡号",
          width: "100",
        },
        {
          prop: "createTime",
          label: "下单时间",
        },
        {
          prop: "receiveTime",
          label: "接诊时间",
        },
        {
          prop: "status",
          label: "会诊状态",
          width: "70",
          render: (m) => {
            let val = null;
            switch (m.status) {
              case 0:
                val = "待付款";
                break;
              case 1:
                val = "待会诊";
                break;
              case 2:
                val = "会诊中";
                break;
              case 3:
                val = "已完成";
                break;
              case 4:
                val = "用户取消";
                break;
              case 5:
                val = "过号";
                break;
              case 6:
                val = "专家取消";
                break;
            }
            return <div>{val}</div>;
          },
        },
        {
          prop: "handle",
          label: "操作",
          fixed: "right",

          render: (m) => {
            /* 
              <span class="btn-light dp-ib">签到</span>
                <span class="btn-deep dp-ib " onClick={this.jiezhenFn}>
                  接诊
                </span>
                 <span onClick={this.showFn}
                
                    style={{display:m.status==2?'block':'none'}}
                class="btn-light dp-ib">
                  继续会诊
                </span>
                <span onClick={this.yuyueFn} 
                 style={{display:m.status==1?'block':'none'}}
                class="btn-deep dp-ib">
                  查看预约
                </span>
                 <span onClick={this.enterFn} class="btn-deep"
               >
                  开始会诊
                </span>
            */
            return (
              <div>
                {m.status == 2 ? (
                  <span
                    onClick={this.showFn.bind(this, m)}
                    class="btn-light dp-ib mt-1"
                  >
                    继续会诊
                  </span>
                ) : null}
                {m.status == 2 ? (
                  <span
                    class="btn-light dp-ib mt-1"
                    onClick={this.endJz.bind(this, m)}
                  >
                    结束就诊
                  </span>
                ) : null}
                {m.arrive == 0 ? (
                  <span
                    onClick={this.yuyueFn.bind(this, m)}
                    class="btn-deep dp-ib mt-1"
                  >
                    查看预约
                  </span>
                ) : null}
                {m.status == 1 ? (
                  <span
                    onClick={this.enterFn.bind(this, m)}
                    class="btn-deep mt-1"
                  >
                    开始会诊
                  </span>
                ) : null}
                {m.status == 3 && m.arrive == 1 ? (
                  <span
                    onClick={this.showFn.bind(this, m)}
                    class="btn-deep mt-1"
                  >
                    查看详情
                  </span>
                ) : null}
              </div>
            );
          },
        },
      ],
    };
  },
  methods: {
    //重呼
    replaceCall() {
      call_name(this.currentCall.id);
    },
    //叫号器过号
    passCall() {
      if (JSON.stringify(this.currentCall) === "{}" || !this.currentCall) {
        return false;
      }
      over_sign(this.currentCall.id).then((res) => {
        if (res.code == 200) {
          this.currentCall = {};
          this.getCallList();
          this.getdata();
        }
      });
    },
    //叫号器下一个
    nextCall() {
      if (
        this.callData.result.length > 0 &&
        (JSON.stringify(this.currentCall) === "{}" || !this.currentCall)
      ) {
        next_sign(this.callData.result[0].id).then((res) => {
          if (res.code == 200) {
            call_name(this.currentCall.id);
            this.currentCall = {};
            this.getCallList();
            this.getdata();
          }
        });
      } else {
        if (this.currentCall) this.$message.error("请先结束当前就诊！");
        return false;
      }
    },
    //叫号器  开始
    startCall() {
      console.log(this.currentCall);
      if (
        this.callData.result.length > 0 &&
        (JSON.stringify(this.currentCall) === "{}" || !this.currentCall)
      ) {
        next_sign(this.callData.result[0].id).then((res) => {
          console.log(this.callData.result[0].id, "this.currentCall");
          if (res.code == 200) {
            call_name(this.callData.result[0].id);
            this.currentCall = {};
            this.getCallList();
            this.getdata();
          }
        });
      } else {
        if (this.currentCall) this.$message.error("请先结束当前就诊！");
        return false;
      }
    },
    //选择叫号器状态
    tabStatus(e) {
      this.callStatus = e;
      this.getCallList();
    },
    //点击叫号器
    tabCall() {
      this.dialogVisible = true;
      this.getCallList();
    },
    //叫号列表
    getCallList() {
      call_list({
        page: 1,
        rows: 10,
        status: this.callStatus,
      }).then((res) => {
        if (res.code == 200) {
          this.callData = res.result;
          this.callData.result.forEach((item) => {
            for (const key in item) {
              if (key == "name") {
                item[key] = item[key].substring(3);
              }
            }
          });
          this.currentCall = res.result.result.find((i) => {
            return i.status == 2;
          });
          // for (let i = 0; i < res.result.result.length; i++) {
          //   if (res.result.result[i].status == 2) {
          //     console.log(8888);
          //     this.currentCall = res.result.result[i];
          //     return;
          //   }
          // }
        }
      });
    },
    //
    changeHeadStatus(e) {
      this.sereach_options.status = e;
      this.pagination.page = 1;
      this.getdata();
    },
    //搜索
    sereach(e) {
      this.sereach_options = e;
      this.pagination.page = 1;
      this.getdata();
    },
    //专家预约挂号信息统计
    getregisterInfo() {
      register_info_fn()
        .then((res) => {
          this.num_info = res.result;
          this.typeList.forEach((element) => {
            for (const k in this.num_info) {
              if (Object.hasOwnProperty.call(this.num_info, k)) {
                if (element.interface == k) {
                  element.num = this.num_info[k];
                }
              }
            }
          });
        })
        .catch((err) => {
          console.log(err, "专家预约挂号信息统计失败");
        });
    },

    //表格
    getdata() {
      let params = {
        page: this.pagination.page,
        rows: this.pagination.rows,
      };
      params = { ...this.sereach_options, ...params };
      params.start = params.time_val ? params.time_val[0] : null;
      params.end = params.time_val ? params.time_val[1] : null;

      if (params.status == "null") {
        params.status = null;
      } else if (params.status == "0") {
        delete params.status;
        params.arrive = "0";
      } else {
        Number(params.status);
      }
      delete params.time_val;
      my_huizhen(params).then((res) => {
        this.pagination.total = res.result.total;
        this.dataList = res.result.list;
        this.typeList[0].num = this.pagination.total || 0;
      });
    },
    // 改变页码
    handlePageChange(page) {
      this.pagination.page = page;
      this.getdata();
    },
    // 改变页数
    handleSizeChange(size) {
      this.pagination.rows = size;
      this.pagination.page = 1;
      this.getdata();
    },
    jiezhenFn() {
      this.$router.push("/chat");
    },
    yuyueFn(e) {
      /*  this.$router.push("/order"); */

      this.$router.push({ name: "enterConsultation", params: e });
    },
    showFn(e) {
      /* 
         this.$router.push("/completed");
      */

      this.$router.push({ name: "enterConsultation", params: e });
    },
    //接诊
    enterFn(e) {
      export_jiezhen(e.id)
        .then((res) => {
          if (res.code == 200) {
            this.getregisterInfo();
            this.$message({
              message: "接诊成功",
              type: "success",
            });
            setTimeout(() => {
              this.$router.push({ name: "enterConsultation", params: e });
            }, 1000);
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((err) => {
          console.log(err, "接诊错误");
        });
    },
    //结束就诊
    endJz(e) {
      this.$confirm("此操作结束就诊, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          complete_jz(e.id).then((res) => {
            if (res.code == 200) {
              this.getregisterInfo();
              this.$message({
                type: "success",
                message: "操作成功!",
              });
              this.updataExpertInfn();
              this.getdata();
            } else {
              this.$message.error("操作失败请重试");
            }
          });
        })
        .catch(() => {
          console.log(22222);
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    //勾选
    handlechange(val) {
      console.log(val);
    },
  },
};
</script>
<style lang="less" scoped>
.callStation {
  z-index: 99999;
  position: absolute;
  right: 0;
  top: 20rem;
  img {
    width: 8.0625rem;
    height: 7.625rem;
  }
  cursor: pointer;
}
</style>
